<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- 问题：在userName的input里面输入文字，再点切换类型，切换到userEmail的input中，但文字仍然存在
       问题解答：这是因为vue在进行DOM渲染时，出于性能考虑，会尽可能的复用已经存在的元素，而不是创建新的元素
               dom会经过虚拟dom再渲染到浏览器上，当点击切换类型时，虚拟dom删除第一个label和input，再把第一个label和input
               渲染给浏览器，再进行比对修改第一个label和input里的东西
       解决方案：可以给对应的input添加key,并且要保证key的不同-->
  <span v-if="isUser">
    <label for="userName">用户账号：</label>
    <!--用key做为一个标识，当两个key相同时，认为可以进行复用，让key不同时，不能进行复用-->
    <input type="text" id="userName" placeholder="用户账号" key="userName">
  </span>
  <span v-else>
    <label for="userEmail">用户邮箱：</label>
    <input type="text" id="userEmail" placeholder="用户邮箱" key="userEmail">
  </span>
  <button @click="isUser=!isUser">切换类型</button>
</div>

<script src="../js/vue.js"></script>
<script>
  const app=new Vue({
    el: '#app',
    data: {
      isUser:true
    },
  })

</script>
</body>
</html>